<script setup>
import { Modal, message } from 'ant-design-vue';
import { onMounted, ref, reactive } from 'vue';
import { addadm, deleteadm , adminlist } from '@/common/http.api.js'
import { confirmDelete } from '@/utils/modalcomfir.js'
import tlTable from '@/components/Table/tlTable.vue'
//增加账号
const visible = ref(false)

const formData = reactive({
  name: '',
  acc: '',
  pwd: ''
})

const rules = reactive({ name: { required: true, message: '姓名不能为空', trigger: 'blur' }, 
  acc: { required: true, message: '账号不能为空', trigger: 'blur' },
  pwd: { required: true, message: '密码不能为空', trigger: 'blur' } })

const formRef = ref()
async function handleOk() {
  formRef.value
    .validate()
    .then(async () => {
      const res = await addadm(formData)
      if(res.code === 0){
      isRefrensh.value ++
      message.success('新增成功')
      visible.value = false;
      }else{
        message.error('账号已存在！请重新输入')
      }
    })
    .catch((error) => {
      console.log("error", error);
    });

}


// 删除账号
const deleteAdm = (row) => {
  confirmDelete('删除管理员账号', '确定要删除此条账号吗？' ,async () => {
    console.log(row);
    await deleteadm({ admID:row.admID })
    message.success('删除成功')
    isRefrensh.value++
  })

}
// 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "姓名:",
    prop: "name",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "账号:",
    prop: "acc",
    type: "input-complete",
    options: [],
    value: "",
  },

  {
    type: "clear-btn",
  },
  {
    type: "search-btn",
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "账号",
    dataIndex: "acc",
    key: "acc",
  },
  {
    title: "操作",
    align: "center",
    renderDom: (h, row) => {
      return (
        <a-button
          type="link"
          size="small"
          onClick={() => {
            deleteAdm(row)
          }}
        >
          删除
        </a-button>
      );
    },
  },
]);
</script>

<template>
  <div>
    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="adminlist">
        <template v-slot:title>管理员账号</template>
        <template v-slot:oprate>
          <a-button type="primary" @click="visible = true">+ 新增</a-button>
        </template>
      </tl-table>
    </div>
    <a-modal v-model:visible="visible" title="新增账号" @ok="handleOk">
      <a-form :model="formData" ref="formRef" labelAlign="right" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }"
        :rules="rules">

        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formData.name" :maxlength="10" placeholder="请输入姓名" />
        </a-form-item>

        <a-form-item label="账号" name="acc">
          <a-input v-model:value="formData.acc" :maxlength="10" placeholder="请输入账号" />
        </a-form-item>

        <a-form-item label="密码" name="pwd">
          <a-input-password v-model:value="formData.pwd" :maxlength="10" placeholder="请输入密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>



<style lang="scss" scoped>

</style>
